<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--bootstrap插件-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
	<!--字体插件-->
	<link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
	<!--ztree-->
	<link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
	<!--common-->
	<link href="/static/css/common.css" rel="stylesheet"/>
	<!--帮助手册样式-->
	<link rel="stylesheet" type="text/css" href="/static/css/help/document.css">
	<!--代码高亮-->
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shThemeDefault.css"/>
	<title>无标题文档</title>
<script>
//参数
var params = {
	"pageSizeArr" : [2,10,25,50,75,100]//每页多少条选择集合
	,"pageSize" : 2//每页多少条
	,"currentPage" : 1//当前页,默认第一页
};
//数据
var list = [{"id":"1","name":"张三"},{"id":"2","name":"李四"},{"id":"3","name":"王五"}];
//去第num页
function goPage(num){
	var result = getPart(num);
	//生成表格
	var data = result.data;
	var _html = "";
	if (data && data.length > 0) {
		for (var i=0;i<data.length;i++) {
			_html += "<tr>";
			_html += "<td>"+data[i].id+"</td>";
			_html += "<td>"+data[i].name+"</td>";
			_html += "</tr>";
		}
	}
	$("#mainList>tbody").html(_html);
	//生成分页条
	showPageInfo(result);
}
//选择每页显示多少条
function choicePageSize(num){
	params["pageSize"] = num;
	goPage(1);
}
//获取第num页数据
function getPart(num){
	var result = {
		pageNumber : num
		,pageSize : params["pageSize"]
		,total : 0
		,code : 0
		,info : "成功"
	};
	var total = list ? list.length : 0;
	result.total = total;
	var si = params["pageSize"];
	var begin = si * (num-1);//起始索引
	var end = begin + si - 1;//结束索引
	console.info("获取第"+num+"页数据\n总共"+total+"条数据\n起始索引为"+begin+"\n结束索引为"+end);
	var data = new Array();
	for(var i=begin;i<=end;i++){
		if(i <= (total-1)){
			data.push(list[i]);
		}
	}
	result.data = data;
	return result;
}
//判断参数是否有效
function isValid(val){
	if(typeof(val) == "undefined"){
		return false;
	}else{
		if(val != null && val != "" && val !="null" && val != "undefined"){
			return true;
		}else{
			return false;
		}
	}
}
//显示分页条
function showPageInfo(result){
	var pageBar = $(".page-bar");//分页条
	//验证是否有分页条
	if(!pageBar || !pageBar.attr("class")){
		console.info("分页条未发现!");
		return;
	}
	//验证分页必要参数的有效性
	if(!isValid(result.pageSize) || !isValid(result.pageNumber) /*|| !isValid(result.total)*/){
		console.info("分页必要参数无效!");
		pageBar.html("");
		return;
	}
	var maxPageNormalBarNum = 8;//分页条保持的最大可点击块的数量,确保在页数很多的时候也最多显示8个小块块
	var currentPage = result.pageNumber;//当前页
	params["currentPage"] = currentPage;
	var totalPage = Math.ceil(result.total/result.pageSize);//总页数
	var totalCount = result.total;//记录总数

	if(totalCount < 1 && currentPage == 1){
		console.info("第一页总记录数小于1,隐匿分页条!");
		pageBar.html(" 暂无数据!");
		return;
	}else if(totalCount < 1 && currentPage > 1){
		console.error("[分页条异常] 总记录数小于1，但是当前页大于1。可能是在查询该页记录之前记录发生了删除！");
	}

	var first = '<li onclick="goPage(1)"><a>首页</a></li>';//首页
	var last = '<li onclick="goPage('+(currentPage-1)+')"><a>上一页</a></li>';//上一页
	var normal = '<li class="active" onclick="goPage(1)"><a>1</a></li>';//普通的页数
	var next = '<li onclick="goPage('+(currentPage+1)+')"><a>下一页</a></li>';//下一页
	var end = '<li onclick="goPage('+totalPage+')"><a>尾页</a></li>';//尾页

	//首页和上一页
	if(currentPage > 1){
		//处理因为同步问题带来的特殊情况
		if((currentPage - totalPage) > 1){//当前页大于总页数至少1页,上一页禁用
			last = '<li class="disabled" onclick=""><a>上一页</a></li>';
		}
	}else{//当前页小于等于1,上一页和首页都禁用
		first = '<li class="disabled" onclick=""><a>首页</a></li>';
		last = '<li class="disabled" onclick=""><a>上一页</a></li>';
	}

	//下一页和尾页
	if(currentPage < totalPage){

	}else{
		next = '<li class="disabled" onclick=""><a>下一页</a></li>';
		end = '<li class="disabled" onclick=""><a>尾页</a></li>';
	}

	if(totalPage > 1){//总页数大于1时,处理分页小块
		normal = '';
		if(totalPage <= maxPageNormalBarNum){//总页数小于等于最大限制数,正常循环显示
			for(var i=0;i<totalPage;i++){
				var n = i + 1;//页数
				if(currentPage == n){//当前页着色
					normal += '<li class="active" onclick="goPage('+n+')"><a>'+n+'</a></li>';
				}else{
					normal += '<li onclick="goPage('+n+')"><a>'+n+'</a></li>';
				}
			}
		}else{
			var l = Math.floor(maxPageNormalBarNum/2);//中心左边个数
			var r = maxPageNormalBarNum - 1 - l;//中心右边个数

			if(currentPage <= l){
				for(var i=0;i<maxPageNormalBarNum;i++){//这里和上面的循环的区别就在这里可以完全显示最大允许数量的块
					var n = i + 1;//页数
					if(currentPage == n){//当前页着色
						normal += '<li class="active" onclick="goPage('+n+')"><a>'+n+'</a></li>';
					}else{
						normal += '<li onclick="goPage('+n+')"><a>'+n+'</a></li>';
					}
				}
			}else if(currentPage > l && currentPage < (totalPage - r)){//当前页超出限制范围一半且距离最大页也差一半时,以当前页为中心,左右扩充到限制数大小
				var s = currentPage - l;
				var e = currentPage + r;
				while(s <= e){
					if(currentPage == s){//当前页着色
						normal += '<li class="active" onclick="goPage('+s+')"><a>'+s+'</a></li>';
					}else{
						normal += '<li onclick="goPage('+s+')"><a>'+s+'</a></li>';
					}
					s++;
				}
			}else{//当前页超出右临界点
				for(var i=0;i<maxPageNormalBarNum;i++){
					var n = totalPage - maxPageNormalBarNum + 1 + i;//页数
					if(currentPage == n){//当前页着色
						normal += '<li class="active" onclick="goPage('+n+')"><a>'+n+'</a></li>';
					}else{
						normal += '<li onclick="goPage('+n+')"><a>'+n+'</a></li>';
					}
				}
			}
		}
	}
	var _size = '';
	var _html = '';
	var pageSizeArr = params["pageSizeArr"];
	var defSize = params["pageSize"];
	if(isValid(pageSizeArr) && typeof(pageSizeArr) == "object"){
		//生产选择项
		var flag = false;//标记pagesize是否在备选池中
		_size += '<select class="input-sm" onchange="choicePageSize(this.value)">';
		for(var i=0;i<pageSizeArr.length;i++){
			if(result.pageSize && result.pageSize == pageSizeArr[i]){
				_size += '<option value="' + pageSizeArr[i] + '" selected="selected">' + pageSizeArr[i] + '</option>';
				flag = true;
			}else{
				_size += '<option value="' + pageSizeArr[i] + '">' + pageSizeArr[i] + '</option>';
			}
		}
		_size += '</select>';
		if(!flag){
			console.error("每页记录数pageSize在备选池pageSizeArr中检索不到，请检查相关参数设置！")
			_size = result.pageSize;
		}
		_html = '<div class="pull-left">当前第&nbsp;'+currentPage+"&nbsp;页，每页&nbsp;"+_size+"&nbsp;条，共&nbsp;"+totalCount+"&nbsp;条记录</div>";
	}
	_html += '<ul class="pagination pull-right">'
		+ first
		+ last
		+ normal
		+ next
		+ end
		+ '</ul>';
	pageBar.html(_html);
}
</script>
</head>
<body style="padding:5px 10px; box-sizing:border-box; background-color:white;">
<input type="button" value="查询" onclick="goPage(1)"/>
<table class="table table-bordered table-hover table-striped table-condensed" id="mainList">
	<thead>
		<th>id</th>
		<th>name</th>
	</thead>
	<tbody></tbody>
</table>

<div class="page-bar"></div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--帮助手册js-->
<script src="/static/js/help/document.js"></script>
<!--代码高亮-->
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shCore.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script class="javascript">
	highLight();
</script>
</body>
</html>
